<template>
  <el-checkbox-group
    v-model="val"
    size="medium"
    :class="{'require':getRequire && isNull()}"
    @change="change"
  >
    <el-checkbox
      v-for="item in options"
      :key="item[keyField]"
      :label="item[keyField]"
      size="small"
      :disabled="disabled"
      :border="true"
    >
      {{ item[valueField] }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  name: 'IkTableCheck',
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'change'
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    keyField: {
      type: String,
      default: ''
    },
    valueField: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: function() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    require: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      val: []
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    value: {
      handler(value, oldValue) {
        if (value !== '') {
          this.val = value.split(',')
        } else {
          if (this.defaultValue === '') {
            this.val = []
          } else {
            this.val = this.defaultValue.split(',')
          }
          this.$emit('change', this.defaultValue)
        }
        this.$emit('onFieldChange', this.line, this.code, oldValue, value)
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    change(value) {
      // 取值验证
      // v-model实现触发方法，返回时链接为String
      if (value.length <= 0) {
        this.$emit('change', '')
        return
      }
      this.$emit('change', value.join(','))
    },
    isNull() {
      return this.val.length === 0
    },
    reset() {

    },
    clean() {

    }
  }
}
</script>
<style scoped>
.require> .el-checkbox{
  border: 1px solid rgb(245, 108, 108);
}
</style>
<style lang="scss" >
.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
